<!DOCTYPE HTML>
<html>
<head>
    <title>订单详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- import start -->
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/layer/layer.js"></script>
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/global.css">
    <!-- import end -->
</head>
<body>
    <!-- mine start -->
    <div class="container-fluid mine" id="mine">
        <div class="row">
            <div v-if="userInfo==null" class="col-xs-6">
                <span>东方购物欢迎你，</span>&nbsp;
                <span><u><strong><a href="/login.html">[请登录]</a></strong></u></span>&nbsp;
                <span><u><strong><a href="javascript:void(0)">[免费注册]</a></strong></u></span>
            </div>
            <div v-else>
                <div  class="col-xs-6">
                    <span>东方购物欢迎你，</span>&nbsp;
                    <span><u><strong><a href="javascript:void(0)">[{{userInfo.nickname}}]</a></strong></u></span>&nbsp;
                    <span><u><strong><a href="javascript:void(0)" @click="logout">[退出登录]</a></strong></u></span>
                </div>
                <div class="col-xs-6 text-right">
                    <span><u><strong><a href="/my_orders.html" target="_blank">[我的订单]</a></strong></u></span>&nbsp;
                    <span><u><strong><a href="#" data-toggle="modal" data-target="#addressModal">[我的地址]</a></strong></u></span>&nbsp;
                    <span><u><strong><a href="javascript:void(0)" @click="shopCar">[购物车]</a></strong></u></span>&nbsp;
                </div>
                <!-- Address start -->
                <div class="modal fade" id="addressModal" tabindex="-1" role="dialog" aria-labelledby="addressModal">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">修改地址</h4>
                            </div>
                            <div class="modal-body">
                                <div class="panel panel-danger" style="background-color:rgba(222,222,222,0.8)">
                                    <div class="panel-heading">
                                        <span>当前地址:</span>
                                        <span>{{userInfo.address}}</span>
                                    </div>
                                    <br>
                                    <div class="panel-body">

                                        <address_select ref="selectAddress"></address_select>

                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                                <button @click="updateAddress" type="button" class="btn btn-primary">修改地址</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Address end -->
            </div>
        </div>
    </div>
    <!-- mine end -->

    <!-- header start -->
    <div class="container-fluid header">
        <div class="row">
            <div class="col-xs-12 banner">
                <img src="/img/banner.jpg" />
            </div>
        </div>
    </div>
    <!-- header end -->

    <div class="container-fluid main" id="orderDetail">
        <div class="panel panel-default" style="height:100%;background-color:rgba(222,222,222,0.8)">
            <table class="table">
                <tr>
                    <td>商品</td>
                    <td style="text-align: center">
                        {{goods.goodsName}}
                        <br>
                        <img :src="goods.goodsImg" width="200" height="200" />
                    </td>
                    <td colspan="3">
                        <p>{{goods.goodsTitle}}</p>
                        <p>{{goods.goodsDetail}}</p>

                    </td>
                </tr>
                <tr>
                    <td>商品价格</td>
                    <td colspan="3">{{goods.goodsPrice}}</td>
                </tr>
                <tr>
                    <td>数量</td>
                    <td colspan="3">{{order.count}}</td>
                </tr>

                <tr>
                    <td>订单价格</td>
                    <td colspan="3">{{order.price}}</td>
                </tr>
                <tr>
                    <td>下单时间</td>
                    <td colspan="3">{{new Date(order.createTime).format("yyyy-MM-dd hh:mm:ss")}}</td>
                </tr>
                <tr>
                    <td>订单状态</td>
                    <td>
                        <span v-if="order.status==0">未支付</span>
                        <span v-if="order.status==1">已支付</span>
                    </td>
                    <td colspan="3">
                        <button v-if="order.status==0" @click="pay" class="btn btn-danger btn-lg" hidden>立即支付</button>
                    </td>
                </tr>
                <tr>
                    <td>收货人</td>
                    <td colspan="3">{{order.userId}}</td>
                </tr>
                <tr>
                    <td>收货地址</td>
                    <td colspan="3">{{order.address}}</td>
                </tr>
            </table>
        </div>
    </div>

    <!-- footer start -->
    <footer>
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-6">
                    <h4><img src="/img/footImg.jpg" width="250" /></h4>
                    <p>我们一直致力于为广大消费者提供更加优质的购物体验！</p>
                </div>
                <div class="col-xs-6">
                    <div class="row">
                        <div class="col-xs-4">
                            <h4>关于</h4>
                            <ul class="list-unstyled">
                                <li><a href="#">关于我们</a></li>
                                <li><a href="#">广告合作</a></li>
                                <li><a href="#">友情链接</a></li>
                            </ul>
                        </div>
                        <div class="col-xs-4">
                            <h4>联系方式</h4>
                            <ul class="list-unstyled">
                                <li><a href="#">新浪微博</a></li>
                                <li><a href="#">电子邮件</a></li>
                                <li><a href="#">留言板</a></li>
                            </ul>
                        </div>
                        <div class="col-xs-4">
                            <h4>特别致谢</h4>
                            <ul class="list-unstyled">
                                <li><a href="https://www.bootcss.com/">BootStrap中文网</a></li>
                                <li><a href="https://cn.vuejs.org/">Vue.js官网</a></li>
                                <li><a href="https://www.tmall.com/">天猫购物</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <ul class="list-inline text-center">
                    <li><a href="http://www.beian.miit.gov.cn/" target="_blank">京ICP备88888888号-8</a></li><li>京公网安备88888888888888</li>
                </ul>
            </div>
        </div>
    </footer>
    <!-- footer end -->
    <script type="text/javascript" src="/js/myvue.js"></script>
    <script>
        new Vue({
            el:"#orderDetail",
            data:{
                goods:{},
                order:{}
            },
            methods:{
                pay:function(){
                    layer.confirm("确定支付？",{btn:["确定","取消"]},
                        function(){
                            layer.closeAll();
                            // do something
                            layer.msg("支付成功");
                        },
                        function(){
                            layer.closeAll();
                        });
                }
            },
            created:function(){
                var self = this;
                $.ajax({
                    url:"/order/detail/"+g_getQueryString("orderId"),
                    type:"GET",
                    dataType: "JSON",
                    success:function(data){
                        if(data.code==0){
                            self.order = data.data.order;
                            self.goods = data.data.goods;
                        }else{
                            layer.msg(data.msg);
                        }
                    },
                    error:function(msg){
                        layer.msg("客户端请求有误");
                    }
                });
            }
        });
    </script>
</body>
</html>
